<template>
  <div class="creates">
    <el-button
      type="primary"
      class="crebut"
      icon="el-icon-plus"
      @click="TianJiaLuY"
      >添加</el-button
    >
    <!-- 添加弹框 -->
    <el-dialog
      title="添加数据"
      :visible.sync="dialogFormVisible"
      @opened="typescript"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <!-- <el-form-item label="题目编号" prop="qid">
            <el-input v-model="ruleForm.qid"></el-input>
          </el-form-item> -->
        <el-form-item label="课程名称" prop="sname">
          <el-input v-model="ruleForm.sname"></el-input>
        </el-form-item>
        <el-form-item label="难度" prop="nname">
          <el-select
            v-model="ruleForm.nname"
            placeholder="请选择活动区域"
            :loading="nloading"
            @focus="nseleList()"
          >
            <el-option
              v-for="(v, i) of selList.nname"
              :key="i"
              :label="v.nname"
              :value="v.nname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="题目类型" prop="tname">
          <el-select
            v-model="ruleForm.tname"
            placeholder="请选择活动区域"
            :loading="tloading"
            @focus="tseleList()"
          >
            <el-option
              v-for="(v, i) of selList.tname"
              :key="i"
              :label="v.tname"
              :value="v.tname"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="答案" prop="answer">
          <el-input v-model="ruleForm.answer"></el-input>
        </el-form-item>
        <el-form-item label="选项">
          <div
            v-for="(v, i) of box"
            :key="i"
            :ref="v"
            style="margin-bottom: 10px; float: left"
          >
            <!-- <div  style=""></div> -->
          </div>
          <div style="clear: both"></div>
          <div>
            <el-button icon="el-icon-plus" @click="crebox">添加选项</el-button>
            <el-button style="margin: 25px" @click="delbox()"
              >删除选项</el-button
            >
          </div>
        </el-form-item>
        <el-form-item label="题干">
          <div ref="box"></div>
        </el-form-item>
        <el-form-item label="解析">
          <div ref="box1"></div>
        </el-form-item>
        <el-form-item label="知识点">
          <div ref="box2"></div>
        </el-form-item>
        <div style="clear: both"></div>
        <el-form-item>
          <el-button
            type="primary"
            @click="submitForm('ruleForm')"
            :loading="butLoading"
            >立即添加</el-button
          >
          <el-button
            @click="
              resetForm('ruleForm');
              dialogFormVisible = false;
            "
            >取消</el-button
          >
        </el-form-item>
      </el-form>
      <!-- <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div> -->
    </el-dialog>
  </div>
</template>
<script>
import E from "wangeditor";
import axios from "../../api/home";
import hljs from "highlight.js";
export default {
  data() {
    return {
      ruleForm: {
        answer: "",
        jiexi: "",
        nname: "",
        qid: "",
        sname: "",
        title: "",
        tname: "",
        xuanxiang: "",
        zhishidian: "",
      },
      dialogFormVisible: false,
      typescripts: true,
      rules: {
        qid: [{ required: true, message: "内容不能为空", trigger: "change" }],
        sname: [{ required: true, message: "内容不能为空", trigger: "change" }],
        tname: [{ required: true, message: "内容不能为空", trigger: "change" }],
        nname: [{ required: true, message: "内容不能为空", trigger: "change" }],
      },
      //富文本编辑器数据
      editor: "",
      editor1: "",
      editor2: "",
      editor3: "",
      //富文本菜单
      menus: [
        "strikeThrough",
        "foreColor",
        "underline",
        "image",
        "code",
        "undo",
      ],
      fontSizes: {
        "x-small": { name: "10px", value: "1" },
        small: { name: "13px", value: "2" },
        normal: { name: "16px", value: "3" },
        large: { name: "18px", value: "4" },
        "x-large": { name: "24px", value: "5" },
        "xx-large": { name: "32px", value: "6" },
        "xxx-large": { name: "48px", value: "7" },
      },
      //下拉框
      selList: {},
      nloading: true,
      tloading: true,
      //添加按钮
      butLoading: false,
      //多选框
      box: ["box3"],
      numbox: 4,
    };
  },
  methods: {
    TianJiaLuY(){
      this.$router.push("/ItemManagement?name=添加题目")
    },
    //配置富文本
    typescript() {
      if (this.typescripts) {
        this.typescripts = false;

        this.editor = new E(this.$refs.box);
        this.editor.config.height = 150;
        this.editor.config.menus = this.menus;
        this.editor.config.fontSizes = this.fontSizes;
        this.editor.config.menuTooltipPosition = "down";
        this.editor.highlight = hljs;
        this.editor.create();

        this.editor1 = new E(this.$refs.box1);
        this.editor1.config.height = 150;
        this.editor1.config.menus = this.menus;
        this.editor1.config.fontSizes = this.fontSizes;
        this.editor1.config.menuTooltipPosition = "down";
        this.editor1.config.zIndex = 300;
        this.editor1.highlight = hljs;
        this.editor1.create();

        this.editor2 = new E(this.$refs.box2);
        this.editor2.config.height = 150;
        this.editor2.config.menus = this.menus;
        this.editor2.config.fontSizes = this.fontSizes;
        this.editor2.config.menuTooltipPosition = "down";
        this.editor2.config.zIndex = 200;
        this.editor2.highlight = hljs;
        this.editor2.create();

        this.editor3 = new E(this.$refs.box3);
        this.editor3.config.height = 100;
        this.editor3.config.menus = this.menus;
        this.editor3.config.fontSizes = this.fontSizes;
        this.editor3.config.menuTooltipPosition = "down";
        this.editor3.config.zIndex = 200;
        this.editor3.highlight = hljs;
        this.editor3.create();
      }
    },
    //上传数据
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(this.ruleForm);
        if (valid) {
          this.ruleForm.title = this.editor.txt.html();
          this.ruleForm.jiexi = this.editor1.txt.html();
          this.ruleForm.zhishidian = this.editor2.txt.html();
          this.ruleForm.xuanxiang = this.editor3.txt.html();
          for (let key in this.box) {
            console.log(this[this.box[key]]);
          }
          this.butLoading = true;
          axios.xiangqingDTO(this.ruleForm).then(() => {
            this.dialogFormVisible = false;
            this.selList = {};
            this.butLoading = false;
          });
        } else {
          console.log(this.editor4.txt.html());
          console.log("error submit!!");
          return false;
        }
      });
    },
    //清除数据
    resetForm(formName) {
      this.editor.txt.clear();
      this.editor1.txt.clear();
      this.editor2.txt.clear();
      this.box = ["box3"];
      this.numbox = 4;
      this.$refs[formName].resetFields();
    },
    //添加下拉菜单
    tseleList() {
      axios.tseleLise().then((res) => {
        this.selList.tname = res.data;
        this.tloading = false;
      });
    },
    nseleList() {
      axios.nseleLise().then((res) => {
        this.selList.nname = res.data;
        this.nloading = false;
      });
    },
    crebox() {
      const num = this.numbox++;
      const box = "box" + num;
      this.box.push(box);
      console.log(this.box);
      setTimeout(() => {
        this[box] = new E(this.$refs[box]);
        this[box].config.height = 100;
        this[box].config.menus = this.menus;
        this[box].config.fontSizes = this.fontSizes;
        this[box].config.menuTooltipPosition = "down";
        this[box].config.zIndex = 2000 - num;
        this[box].highlight = hljs;
        this[box].create();
        console.log(this);
      }, 10);
    },
    delbox() {
      if (this.box.length != 1) {
        this.box.splice(this.box.length - 1, 1);
      }
    },
  },
  mounted() {
    // this.seleList();
  },
};
</script>
<style scoped>
.crebut {
  float: left;
  margin-right: 20px;
  margin-bottom: 30px;
  margin-top: 20px;
}
.content {
  width: 50%;
}
.but {
  position: relative;
  top: -63px;
}
</style>
